<template>
  <div class="login">
      <div class="from_wrap">
          <div class="from">
              <el-form
                ref="formRef"
                :model="loginData"
                label-width="90px"
                class="demo-dynamic"
              >
                <el-form-item
                prop="username"
                label="用户名"
                :rules="[
                    {
                    required: true,
                    message: '用户名/账号不能为空',
                    trigger: 'blur',
                    }
                ]"
                >
                  <el-input v-model="loginData.username" />
                </el-form-item>
                <el-form-item
                prop="password"
                label="密码"
                :rules="[
                    {
                    required: true,
                    message: '密码不能为空',
                    trigger: 'blur',
                    }
                ]"
                >
                  <el-input v-model="loginData.password" show-password="true" />
                </el-form-item>
            </el-form>
            <div class='btn'>
              <el-button type="success"  plain class="button" round @click='handleLogin'>登 录</el-button>
            </div>
          </div>
      </div>
  </div>
</template>

<script>
import { reactive, toRefs} from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import axios from 'axios'

export default {
name:'Login',
setup(){
    const store = useStore()
    const router = useRouter()
    const count = store.state.number.count
    const data= reactive({
        loginData: {
            username:'admin',
            password:'123456'
        }
    })
    //登录
    const handleLogin=()=>{
        let req = {
            "username": data.loginData.username,
            "password": data.loginData.password
        }
        axios.post('/Login', req).then(res=>{
             let code =res.data.code;
            if(code === '000'){
              let token = res.data.data.token;
              let orgCode = res.data.data.orgCode;
              sessionStorage.setItem('orgCode',orgCode)
            }
            //跳转到  /index  页面
            router.push({
                path:'/index'
            })
            
        }).catch(err=>{
            console.log(err)
        })
    }

//mutations
    // const handleLogin=()=>{
    //     store.commit('number/setCount', 100)
    //     console.log(store.state.number.count)
    // }

//actions
    // const handleLogin=()=>{
    //     store.dispatch('number/setCountPromise',101).then(res=>{
    //         alert('num不大于100')
    //     }).catch(err=>{
    //         alert(err)
    //     })
    // }


//getter
    // console.log('getters改变前',store.getters["number/countState"])
    // const handleLogin=()=>{
    //     store.dispatch('setCountPromise',-101).then(res=>{
    //         alert('num不大于100')
    //         console.log('getters改变后',store.getters["number/countState"])
    //     }).catch(err=>{
    //         alert(err)
    //     })
    // }
    return{
        ...toRefs(data),
        handleLogin
    }
}
}
</script>

<style lang="scss" scoped>
 ::v-deep .el-form-item__label {
    justify-content: flex-start;
    font-size: 15px;
    color:azure;
}
.login {
    width: 100%;
    height: 100%;
    background-color: rgba(103, 103, 104, 0.2);
    background-repeat: no-repeat;
    background-image: url('@/assets/background/login.png');
    background-size: cover;
    .from_wrap {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .from {
            width: 25%;
            height: 50%;
            background-color: rgba(85, 84, 84, 0.5);
            border-radius: 10px;
            .demo-dynamic {
                width: 90%;
                margin-top:15%;
                .el-form-item {
                    margin-bottom: 15%;
                    .el-input {
                        width: 90%;
                        height: 80%;
                    }
                }
            }
            .btn {
                width: 100%;
                display: flex;
                justify-content: center;
                align-content: center;
                .button {
                    width: 30%;
                    height: 10%;
                    font-size: 20px;                
                }
            }
        }
    }
}
</style>